<template>
  <el-select
    class="input-default-width w-container"
    clearable
    size="large"
    placeholder="组别"
  >
    <el-option
      v-for="item in data"
      :key="item"
      :label="item.groupDescribe"
      :value="item.groupId"
    ></el-option>
  </el-select>
</template>

<script  setup>
import { ref, onMounted } from "vue";
import { GetGroupsDownApi } from "@/api/manage/competition";
const data = ref([]);
const handleInit = async () => {
  let res = await GetGroupsDownApi();
  if (res.success) {
    data.value = res.entityList;
  }
};
onMounted(() => {
  handleInit();
});
</script>

<style lang="scss" scoped>
.w-container {
  --el-input-width: 132px !important;
  :deep(.el-input) {
    --el-input-width: 132px !important;
  }
  :deep .el-select__selection {
    width: 132px !important;
  }
}
</style>